// n 存储图片加载到的位置，避免每次从第一张图开始遍历
var n = 0;
// 封装一个懒加载函数
function lazyLoad(imgs) {
  // console.log(imgs);
  //Ⅰ）获取可视区的高度
  var height = document.documentElement.clientHeight;
  // var height = window.innerHeight;
  // window.innerHeight包含边框，document.clientHeight 不包含边框
  // Ⅱ）获取滚动条的位置(处理IE低版本兼容)
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // Ⅲ）遍历图片
  for (var i = n; i < imgs.length; i++) {
    // console.log(imgs[i].getAttribute("src"));
  // Ⅳ）判断图片是否可以显示
    //可视区高度+滚动条内的距离>图片到顶端的距离 即图片到达显示区域可以加载图片
    if (imgs[i].offsetTop < height + scrollTop) {
  // Ⅴ）判断图片是否为未加载
      // 避免重复加载已加载图片，图片的src的属性为空即还未加载
      if (imgs[i].getAttribute("src") == "" || !imgs[i].getAttribute("src")) {
  // Ⅶ）修改图片路径
        // imgs[i].setAttribute("src", imgs[i].getAttribute("data-src"));
        imgs[i].src = imgs[i].getAttribute("data-src");
      }
      n = i + 1;
    }
  }
}
